'use client';

import Card from "antd/es/card";
import Flex from "antd/es/flex";
import Divider from "antd/es/divider";
import Typography from "antd/es/typography";
import Image from "next/image";
import {RootState} from "@/stores";
import {useSelector} from "react-redux";
import { useEffect, useState } from "react";
import { getUserMoodPostCount } from "@/api/moodPostController";



export default function Index() {
  const { Text } = Typography;
  const loginUser = useSelector((state: RootState) => state.loginUser);
  const [moodPostCount, setMoodPostCount] = useState(0);

  useEffect(() => {
    // 获取用户饭点帖子数量
    const fetchMoodPostCount = async () => {
      try {
        if (loginUser?.id) {
          const res = await getUserMoodPostCount();
          if (res.code === 0) {
            setMoodPostCount(res.data || 0);
          }
        }
      } catch (error) {
        console.error("Failed to fetch mood post count:", error);
      }
    };

    fetchMoodPostCount();
  }, [loginUser?.id]);

  return (
    <Card bodyStyle={{ padding: '20px' }}>
      <Flex vertical gap={16}>
        {/* 用户基本信息 */}
        <Flex align="center" gap={12}>
          <img
            src={loginUser?.userAvatar || "/assets/userAvatar.png"}
            alt="avatar"
            style={{
              width: '48px',
              height: '48px',
              borderRadius: '50%',
            }}
          />
          <Flex vertical gap={4}>
            <Flex align="center" gap={8}>
              <Text strong style={{
                  fontSize: '15px' ,
                  display: 'inline-block',
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  maxWidth: '15ch' }}>
                {loginUser?.userName || '未设置昵称'}
              </Text>
              {loginUser?.vipRole === 1 && (
                <Image
                  src="/assets/vip.svg"
                  alt="VIP"
                  width={25}
                  height={25}
                />
              )}
            </Flex>
            <Text
                type="secondary"
                style={{
                  display: 'inline-block',
                  width: '100%',
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  maxWidth: '22ch' // 限制22个字符宽度
                }}
            >
              {loginUser?.userProfile || '这个人很懒，还没有简介~'}
            </Text>
          </Flex>
        </Flex>

        {/* 数据统计 */}
          {/*// 分割线*/}
        <Divider style={{ margin: '0' }} />
        <Flex justify="space-between" align="center">
          <Flex vertical align="center">
            <Text strong>{moodPostCount}</Text>
            <Text type="secondary">饭点</Text>
          </Flex>
          <Flex vertical align="center">
            <Text strong>0</Text>
            <Text type="secondary">待办</Text>
          </Flex>
          <Flex vertical align="center">
            <Text strong>{loginUser.friendsNum}</Text>
            <Text type="secondary">好友</Text>
          </Flex>
        </Flex>
      </Flex>
    </Card>
  );
} 